<!DOCTYPE html>
<html lang="z_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品管理</title>
    <style>
        button{
            border: 0;
            background-color: rgb(215, 221, 227);
            font-size: 15px;
        }
        button:hover{
            color: blue;
            font-size: 16px;
        }
    </style>
    <link rel="stylesheet" th:href="@{font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{goods.css}">
</head>
<body>
    <div class="goods_nav">
        <div class="nl">
        <ul>
           <li>商品管理</li>
            <li><i class="fa fa-plus-circle" aria-hidden="true"></i><button onclick="show()">商品展示</button></li>
           <li><i class="fa fa-bars" aria-hidden="true"></i><button onclick="show1()">分类管理</button></li>
        </ul>
        </div>
        <div class="nr">
            <ul>
                <li><i class="fa fa-search" aria-hidden="true"></i></li>
                <li><i class="fa fa-hourglass-o" aria-hidden="true"></i></li>
                <li><i class="fa fa-window-restore" aria-hidden="true"></i>切换查看</li>
            </ul>
        </div>
    </div>
<div id="goods_box">
<!--    <div id="goods_box1" >-->
<!--            <div class="box" id="goods_list" v-for="n in 10"></div>-->
<!--              <div class="goods_img"></div>-->
<!--              <div class="goods_price"><i class="fa fa-jpy" aria-hidden="true"></i>89.89</div>-->
<!--              <div class="goods_name">冰墩墩</div>-->
<!--              <div class="">操作</div>-->
<!--            </div>-->
<!--    </div>-->

    <div id="goods_box1" >
        <table class="table table-striped table-bordered table-hover text-center" >
            <thead>
            <tr style="text-align:center">
                <!--        th标签定义html表格中的表头单元格-->
                <th>编号</th>
                <th>商品名</th>
                <th>价格</th>
                <th>图片</th>
                <th>操作</th>
            </tr>
            </thead>
            <tr th:each="good:${good}">
                <!--        td标签定义html表格中的标准单元格-->
                <td th:text="${good.id}"></td>
                <td th:text="${good.name}"></td>
                <td th:text="${good.price}"></td>
                <td ><img width="20px" height="20px" th:src="@{/img/bing.png}"></td>
                <td>
                    <a class="btn btn-danger" th:href="@{'/delete/'+${good.id}}">删除</a>
                </td>
            </tr>
        </table>
        <button class="btn btn-block" ><a href="add.html">添加商品</a></button>
    </div>




    <div id="goods_box2" style="display: none">
        <div class="box" id="goods_list" v-for="n in 8">
        <div class="goods_img"><img width="130px" height="140px" th:src="@{/img/bing.png}"></div>
        <div class="goods_price"><i class="fa fa-jpy" aria-hidden="true"></i>299.9</div>
        <div class="goods_name">冰墩墩</div>
        <div class="goods_i">
            <i class="fa fa-pencil" aria-hidden="true"></i>
            <i class="fa fa-trash" aria-hidden="true"></i>
        </div>
    </div>
</div>
     
          <div id="goods_box3"  style="display: none;">
                <div class="box" id="goods_sort" v-for="n in 9">
                    <div class="sort">
                        <div class="sort_left">百货</div>
                        <div class="sort_right">
                            商品<br>
                            已有个数<br>
                            300
                        </div>
                    </div>
                </div>
          </div>
</div>


    <div class="page">
        <ul class="pagination">
            <li class="page-prev">
              <a class="prev" href="#"><svg t="1580195949197" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4493" width="20" height="20"><path d="M906.78272 588.78976c-0.02048 8.4992-6.88128 15.36-15.38048 15.37024l-443.6992-0.01024 75.70432 191.68256c2.51904 6.42048 0.48128 13.76256-5.03808 17.90976-5.51936 4.16768-13.13792 4.1472-18.61632-0.09216l-376.5248-289.47456c-3.77856-2.89792-6.00064-7.41376-6.00064-12.16512 0-4.78208 2.22208-9.27744 6.00064-12.1856l376.5248-289.47456c2.7648-2.11968 6.06208-3.19488 9.37984-3.19488 3.23584 0 6.5024 1.03424 9.23648 3.10272 5.51936 4.1472 7.5776 11.48928 5.03808 17.90976L447.68256 419.84l443.71968-0.01024c8.4992 0.01024 15.36 6.88128 15.36 15.36L906.78272 588.78976z" p-id="4494" fill="#777777"></path></svg></a>
            </li>
            <li class="page-number active"><a href="#">1</a></li>
            <li class="page-number"><a href="#">2</a></li>
            <li class="page-number"><a href="#">3</a></li>
            <li class="page-number"><a href="#">4</a></li>
            <li class="page-number"><a href="#">5</a></li>
            <li class="page-next">
              <a class="next" href="#"><svg t="1580195920917" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4995" width="20" height="20"><path d="M906.77248 512c0 4.77184-2.21184 9.2672-5.9904 12.17536l-376.5248 289.4848c-2.7648 2.11968-6.06208 3.18464-9.3696 3.18464-3.25632 0-6.5024-1.03424-9.24672-3.09248-5.50912-4.15744-7.5776-11.48928-5.03808-17.90976l75.71456-191.67232L132.58752 604.17024c-8.48896 0-15.36-6.88128-15.36-15.36l0-153.6c0-8.48896 6.87104-15.36 15.36-15.36l443.72992 0-75.71456-191.68256c-2.53952-6.42048-0.47104-13.75232 5.04832-17.90976 5.50912-4.15744 13.12768-4.13696 18.60608 0.09216l376.5248 289.4848C904.56064 502.7328 906.77248 507.22816 906.77248 512z" p-id="4996" fill="#777777"></path></svg></a>
            </li>
          </ul>
    </div>
<!--    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>-->
    <script th:src="@{vue.js}"></script>
    <script>
        new Vue({
            el:"#goods_box2",

        });
        new Vue({
            el:"#goods_box3",

        });
    </script>
    
    <script>
        function show(){
            document.getElementById("goods_box2").style.display="block";
            document.getElementById("goods_box1").style.display="none";
               
        }
        function show1(){
            document.getElementById("goods_box3").style.display="block";
            document.getElementById("goods_box2").style.display="none";
               
        }
        // function save(){
        //     alert(document.getElementById("name").value)
        //     alert(document.getElementById("age").value)
        // }
    </script>
</body>
</html>